<template>
  <view>
    <view class="listbox bounceInDown">
      <image src="/static/images/contact/banner.png" style="width: 700rpx" mode="widthFix"></image>
    </view>
    <!--    lightSpeedIn lightSpeedIn2  -->
    <view
      class="listbox projct_box lightSpeedIn"
      :class="[index % 2 == 0 ? 'lightSpeedIn2' : 'lightSpeedIn']"
      v-for="(item, index) in listArr"
      :key="index"
    >
      <view
        class="t-flex"
        style="
          flex-direction: row;
          height: 50rpx;
          margin-bottom: 28rpx;
          justify-content: space-between;
          align-items: flex-end;
        "
      >
        <text class="t-size-32 t-font-700">{{ item.title }}</text>
        <text class="t-size-24 t-color-f42"> {{ item.num }}</text>
      </view>
      <view class="projct_info">
        <view class="">
          <image class="projct_img" :src="item.img" mode=""></image>
        </view>
        <view class="projct_right t-flex">
          <text class="t-size-28 t-font-700">{{ item.name }}</text>
          <text class="t-size-24 t-color-666">{{ item.mode }}</text>
          <view class="projct_but t-flex" @click="makePhoneCall" v-if="item.type == 0">
            <text class="t-size-28 t-color-fff">在线体验</text>
          </view>
          <view
            class="projct_but t-flex"
            @click="makePhoneCall"
            v-if="item.type == 1"
            style="background-color: #ffbe03"
          >
            <text class="t-size-28 t-color-fff">预约定制</text>
          </view>
        </view>
      </view>
    </view>
    <view class="listbox">
      <view class="type_title t-flex">
        <text class="t-color-333 t-size-40 t-font-700"
          >美亚特商城建设 <text style="color: #ff442f">报价通道</text>
        </text>
        <text class="t-color-333 t-size-24" style="margin-top: 20rpx">请您耐心等待，我们会再第一时间为您报价</text>
      </view>
      <view class="contact_input">
        <input type="text" v-model="phone" placeholder="您的手机号码" placeholder-class="t-size-24 t-color-666" />
      </view>
      <view class="contact_input">
        <input type="text" v-model="name" placeholder="您的姓名" placeholder-class="t-size-24 t-color-666" />
      </view>
      <view class="requirement">
        <text class="t-size-32 t-color-333 t-font-700">我的要求：</text>
        <textarea
          style="margin-top: 20rpx; height: 120rpx"
          placeholder="请输入您需要建设的商城类型，或特殊的功能需求，马上为您估价"
          placeholder-class="t-size-24 t-color-666"
        />
      </view>
      <view class="type_bxut t-flex" style="width: 654rpx" @click="makePhoneCall">
        <text class="t-color-fff">获取报价</text>
      </view>
    </view>
    <view class="listbox">
      <image class="type_bg" src="/static/images/contact/type_bg.png" mode="widthFix"></image>
      <view class="type_title t-flex">
        <text class="t-color-fff t-size-40 t-font-700">商城建设选美亚特</text>
        <text class="t-color-fff t-size-24" style="margin-top: 20rpx"
          >帮您在海量电商企业中脱颖而出，让客户快速找到你</text
        >
      </view>
      <image class="type_img" style="width: 584rpx" src="/static/images/contact/type_1.png" mode="widthFix"></image>
      <image class="type_img" style="width: 594rpx" src="/static/images/contact/type_2.png" mode="widthFix"></image>
      <image class="type_img" style="width: 638rpx" src="/static/images/contact/type_3.png" mode="widthFix"></image>
      <image class="type_img" style="width: 678rpx" src="/static/images/contact/type_4.png" mode="widthFix"></image>
      <view class="type_but t-flex" @click="makePhoneCall">
        <text class="t-color-fff">咨询更多</text>
      </view>
    </view>
    <view class="listbox">
      <!-- <view class="type_title t-flex">
				<text class="t-color-333 t-size-40 t-font-700">客户案例</text>
				<text class="t-color-333 t-size-24" style="margin-top: 20rpx;">更优的商城建设服务，为客户提升互联网品牌竞争力</text>
			</view>
			<view class="case">
				<view class="item_case" v-for="(item,key) in 9" :key="key">
					{{ item }}
				</view>
			</view> -->
      <view class="type_title t-flex">
        <text class="t-color-333 t-size-40 t-font-700">商城网站开发定制，就找美亚特</text>
        <text class="t-color-333 t-size-24" style="margin-top: 20rpx"
          >给我们一次机会，也是给您自己一次成功的机会！</text
        >
      </view>
      <view class="type_but t-flex" style="width: 600rpx" @click="makePhoneCall">
        <text class="t-color-fff">联系我们</text>
      </view>
      <image class="" style="width: 700rpx" src="/static/images/contact/bottom.png" mode="widthFix"></image>
    </view>
  </view>
</template>
<script>
/**
 ,{
            "path" : "pages/apps/contact/contact",
            "style" :
            {
                "navigationBarTitleText": "联系我们",
                "enablePullDownRefresh": false
            }

        }
*/
export default {
  data() {
    return {
      scrollTop: 0,
      listArr: [
        {
          title: '零售商城建设（移动云商城）',
          num: '659409家企业已做',
          img: '/static/images/contact/1.png',
          name: 'PC+H5+微商城+小程序+APP+生活号多端可选，全网零售',
          mode: '主要模式：B2C、O2O',
          type: 0,
        },
        {
          title: '多用户商城建设（HiMall）',
          num: '13810家企业已做',
          img: '/static/images/contact/1.png',
          name: '支持平台自营，还可招募多商家入驻一起卖货，多种方式盈利',
          mode: '主要模式：B2B2C、O2O、B2C、B2B',
          type: 0,
        },
        {
          title: '微分销商城建设（销客多）',
          num: '659409家企业已做',
          img: '/static/images/contact/1.png',
          name: '微分销商城建设（销客多）',
          mode: '主要模式：全民分销、以客推客',
          type: 0,
        },
        {
          title: '社区团购商城建设（社区云店）',
          num: '659409家企业已做',
          img: '/static/images/contact/1.png',
          name: '借助微商城或小程序，微信群发起团购，轻松布局千百社区',
          mode: '主要模式：社区团购',
          type: 0,
        },
        {
          title: '个性化商城开发（定制服务）',
          num: '659409家企业已做',
          img: '/static/images/contact/1.png',
          name: '美亚特针对性的商城建设方案，全面满足您的个性化需求',
          mode: '主要模式：量身定制',
          type: 1,
        },
      ],
      phone: '',
      name: '',
    };
  },
  onPageScroll(e) {
    // console.log('e ========>',e.scrollTop);
    this.scrollTop = e.scrollTop;
  },
  methods: {
    makePhoneCall() {
      uni.makePhoneCall({
        phoneNumber: '16696067788', //
      });
    },
  },
};
</script>
<style lang="scss">
.contact {
  background-color: #f8f8f8;
}

.t-color-fff {
  color: #ffffff;
}

.t-color-f42 {
  color: #ff412c;
}

.t-color-666 {
  color: #666666;
}

.t-color-333 {
  color: #333333;
}

.t-size-40 {
  font-size: 40rpx;
}

.t-size-32 {
  font-size: 32rpx;
}

.t-size-24 {
  font-size: 24rpx;
}

.t-size-28 {
  font-size: 28rpx;
}

.t-font-700 {
  font-weight: 700;
}

.t-flex {
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: column;
}

.listbox {
  width: 700rpx;
  margin-left: 25rpx;
  background-color: #ffffff;
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: column;
  margin-top: 20rpx;
  border-radius: 16rpx;
  position: relative;
  align-items: center;
}

// --------------------------------------
.type_bg {
  width: 700rpx;
  position: absolute;
  top: 0;
}

.type_title {
  position: relative;
  align-items: center;
  justify-content: center;
  height: 172rpx;
  margin-bottom: 30rpx;
}

.type_img {
  margin-bottom: 100rpx;
}

.type_but {
  width: 374rpx;
  height: 92rpx;
  background-color: #2d5aff;
  border-radius: 200rpx;
  justify-content: center;
  align-items: center;
  margin-bottom: 30rpx;
}

// --------------------------------------
.case {
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: row;
  flex-wrap: wrap;
  padding-left: 24rpx;
}

.item_case {
  width: 200rpx;
  height: 76rpx;
  margin-right: 24rpx;
  margin-bottom: 30rpx;
  background-color: #f8f8f8;
}

// --------------------------------------
.projct_box {
  padding: 36rpx 24rpx;
}

.projct_info {
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: row;
  width: 660rpx;
}

.projct_img {
  width: 216rpx;
  height: 216rpx;
}

.projct_right {
  margin-left: 20rpx;
}

.projct_but {
  margin-top: 32rpx;
  width: 200rpx;
  height: 68rpx;
  background-color: #2d5aff;
  border-radius: 200rpx;
  justify-content: center;
  align-items: center;
}

.contact_input {
  width: 654rpx;
  height: 92rpx;
  background: #f8f8f8;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  padding-left: 30rpx;
}

// --------------------------------
.requirement {
  width: 654rpx;
  height: 260rpx;
  background: #f8f8f8;
  border-radius: 12rpx;
  padding: 36rpx 32rpx;
  margin-bottom: 30rpx;
}

// -------------------------------------
// @mixin t-animation($name: none ,  $duration: 0s , $function: ease , $delay: 0s , $count: 1 , $direction: normal , $mode: both  ) {
// 	animation-name: $name; /*  动画名称 */
// 	animation-duration: $duration;/* 持续时间 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 */
// 	animation-timing-function: $function; /* 动画类型 规定动画的速度曲线。默认是 "ease"。 */
// 	animation-delay: $delay; /* 延迟时间 规定动画何时开始。默认是 0。 */
// 	animation-iteration-count: $count; /* 循环次数 规定动画被播放的次数。默认是 1。  infinite 规定动画应该无限次播放。 */
// 	animation-direction: $direction; /* 循环中是否反向 规定动画是否在下一周期逆向地播放。默认是 "normal" */
// 	animation-fill-mode: $mode; /* 动画结束时的状态 规定对象动画时间之外的状态。 */
// }
.bounceInDown {
  animation-name: bounceInDown;
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

@keyframes bounceInDown {
  0%,
  60%,
  75%,
  90%,
  100% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  100% {
    transform: none;
  }
}

// -------------------------------------
.lightSpeedIn {
  animation-name: lightSpeedIn;
  animation-timing-function: ease-out;
  animation-duration: 0.9s;
  animation-fill-mode: both;
}

@keyframes lightSpeedIn {
  0% {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    // opacity: 0;
  }

  60% {
    transform: skewX(20deg);
    // opacity: 0.5;
  }

  80% {
    transform: skewX(-5deg);
    // opacity: 1;
  }

  100% {
    transform: none;
    // opacity: 1;
  }
}

.lightSpeedIn2 {
  animation-name: lightSpeedIn2;
  animation-timing-function: ease-out;
  animation-duration: 0.9s;
  animation-fill-mode: both;
}

@keyframes lightSpeedIn2 {
  0% {
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    // opacity: 0;
  }

  60% {
    transform: skewX(20deg);
    // opacity: 0.5;
  }

  80% {
    transform: skewX(-5deg);
    // opacity: 1;
  }

  100% {
    transform: none;
    // opacity: 1;
  }
}
</style>
